<!DOCTYPE html>
<html>
<head>
{{template "common_header.html" .}}
    <style>
        .select-fields-list{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            margin-top:5px;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="x-body">
    <form class="layui-form" method="post" onsubmit="return false;" id="doc-update-account-form">
        <input type="hidden" name="id" value="{{.accountInfo.id}}" />
        <div class="layui-form-item">
            <div style="margin-top:20px;">
                <p class="layui-bg-black" style="text-align:center;height:30px;line-height:30px;margin-bottom:15px;">选择允许登录的App</p>
                {{range $index,$item := .account_apps}}
                        {{if eq $item.is_select true}}
                            <span class="layui-badge select-fields-list" is_select="1" style="display:inline-block;float:left;margin-left:10px;" pid="{{$item.id}}">{{$item.name}}</span>
                        {{else}}
                            <span class="layui-badge layui-bg-blue select-fields-list" is_select="0" style="display:inline-block;float:left;margin-left:10px;" pid="{{$item.id}}">{{$item.name}}</span>
                        {{end}}
                {{end}}
            </div>
        </div>
        <input type="hidden" id="input-fields" name="appids" value="" />
        <div class="layui-form-item" style="margin-top:50px;">
            <button class="layui-btn layui-btn-normal" id="submit-btn" style="width:100%;">保存</button>
        </div>
    </form>
</div>
{{template "common_js.html" .}}
<script>
    layui.use('element', function(){
        var element = layui.element;
    });

    $(function(){
        $("#submit-btn").click(function () {
            var data = $("#doc-update-account-form").serialize();
            var url = "/doUpdateAccountApp";
            $.post(url, data, function (resp) {
                if(resp.en == 200) {
                    layer.msg(resp.em);
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                    parent.location.reload();
                } else {
                    layer.msg(resp.em);
                }
            });
        });

        $('body').on('click', '.select-fields-list', function () {
            var is_select = $(this).attr("is_select");
            if(is_select == 0) {
                $(this).removeClass('layui-bg-blue');
                $(this).attr("is_select", 1);
            } else {
                $(this).addClass('layui-bg-blue');
                $(this).attr("is_select", 0);
            }
            syncFields();
        });

        function syncFields() {
            var keys = new Array();
            $('.select-fields-list').each(function (index, ele) {
                var key = $(ele).attr('pid');
                var is_select = $(ele).attr('is_select');
                if(is_select == 1) {
                    keys.push(key);
                }
            });
            var keys_str = keys.join(',');
            $('#input-fields').val(keys_str);
        }

    });
</script>
</body>
</html>